<template>
    <a-config-provider :locale="locale">
        <a-layout style="width: 100%;min-height:100vh;overflow-y: scroll">
            <a-layout-header style="background-color: white" class="header">
                <img style="width: 42px;height: 42px;float: left;margin-top: 10px;margin-right: 80vw"
                     :src="require('../assets/shop.png')"/>

                <a-popover placement="bottom">
                    <template #content>
                        <div class="header_popover">
                            <p @click="toRestPasswordPage" style="text-align: center">
                                <key-outlined/>
                                <span class="popver_btn_text">修改密码</span>
                            </p>
                            <p @click="outLogin" style="text-align: center">
                                <logout-outlined/>
                                <span class="popver_btn_text">退出登录</span>
                            </p>
                        </div>
                    </template>
                    <a-button style="float: right;margin-top: 15px">
                        <span><user-outlined/>{{username}}</span>
                    </a-button>
                </a-popover>

                <a-menu v-model:selectedKeys="selectedKeys1" theme="dark" mode="horizontal"
                        style="line-height: 64px"/>
            </a-layout-header>
            <a-layout>
                <a-layout-sider width="200" style="background: #fff">
                    <a-menu v-model:selectedKeys="selectedKeys2" v-model:openKeys="openKeys" mode="inline"
                            :style="{ height: '100%', borderRight: 0 }">
                        <a-sub-menu key="sub1">
                            <template #title>
              <span>
                <account-book-outlined/>
                订单管理
              </span>
                            </template>
                            <a-menu-item key="1">
                                <RouterLink to="OrdersPage">订单列表</RouterLink>
                            </a-menu-item>
                            <a-menu-item key="2">
                                <RouterLink to="RefundOrderPage">退款订单列表</RouterLink>
                            </a-menu-item>
                        </a-sub-menu>
                        <a-sub-menu key="sub2">
                            <template #title>
              <span>
                <laptop-outlined/>
                商品管理
              </span>
                            </template>
                            <a-menu-item key="5">
                                <RouterLink to="DishPage">商品列表</RouterLink>
                            </a-menu-item>
                            <a-menu-item key="6">
                                <RouterLink to="DishCategoriesPage">商品类目管理</RouterLink>
                            </a-menu-item>
                            <a-menu-item key="7">
                                <RouterLink to="RankingListPage">销量排行榜</RouterLink>
                            </a-menu-item>
                        </a-sub-menu>
                        <a-sub-menu key="sub3">
                            <template #title>
              <span>
                <user-outlined/>
                会员管理
              </span>
                            </template>
                            <a-menu-item key="9">
                                <RouterLink to="MembersPage">会员列表</RouterLink>
                            </a-menu-item>
                        </a-sub-menu>
                    </a-menu>
                </a-layout-sider>
                <a-layout style="padding: 0 24px 24px">
                    <a-layout-content
                            :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }"
                    >
                        <router-view/>
                    </a-layout-content>
                </a-layout>
            </a-layout>
        </a-layout>
    </a-config-provider>
</template>

<script>
    import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN';

    export default {
        name: "Index",
        data() {
            return {
                locale: zhCN,
                username: localStorage.getItem("username"),
            }
        },
        created() {
        },

        mounted() {

        },

        methods: {
            outLogin() {
                localStorage.removeItem("username");
                localStorage.removeItem("token");
                this.$router.push({name: "login"})
            },
            toRestPasswordPage() {
                this.$router.push({name: "RestPassword"})
            }
        }
    }
</script>

<style scoped lang="scss">

    .header {
        margin-bottom: 20px;
    }

    .header_popover {
        display: flex;
        flex-direction: column;
        width: 128px;
        height: 64px;
        align-items: center;
        justify-content: space-around;

        p {
            cursor: pointer;
            margin: 0px;

            .popver_btn_text {
                margin-left: 8px;
            }
        }
    }

    .logo {
        width: 50px;
        height: 50px;
        float: right;
        color: white;
        margin: 0 auto;
    }


    .site-layout-background {
        background: #fff;
    }
</style>